<template>
    <view class="bind-new-phone common-interval">
        <view class="title">请输入新的手机号码</view>
        <view class="input-wrapper border">
            <text class="one one-approve-Invoice icon-btn"/>
            <input v-model="phone" placeholder-style="color: #999;" class="uni-input" placeholder="请输入手机号码"/>
        </view>
        <gw-verification-code v-model="verificationCode" :type="2" :phone="phone"/>
        <view class="common-txt" style="margin-top: 46rpx;" @tap="changeModal">确认绑定</view>
        <gw-show-modal v-model="showModal" type="custom" width="560px" height="494px">
            <view class="change-phone-confirm">
                <image class="img" src="https://img.thumbrary.com/smallBell.png"/>
                <view class="tips">确认更换绑定手机号码？</view>
                <view class="btn-wrappers common-flex-between">
                    <text class="btns white-btn" @tap="cancelHandle">取消</text>
                    <text class="btns blue-btn" @tap="changePhone">确认</text>
                </view>
            </view>
        </gw-show-modal>
    </view>
</template>

<script>
    import gwVerificationCode from '@/pages/components/gw-verification-code';
    import gwShowModal from '@/pages/components/gw-show-modal';
    import service from '@/service';
    import { vCode, getUserInfo } from "@/util/commonFn";
    export default {
        name: "bindNewPhone",
        components: {
            gwVerificationCode, gwShowModal
        },
        data(){
            return{
                verificationCode: '',
                phone: '',
                showModal: false
            }
        },
        methods: {
            // 弹出确认框
            changeModal(){
                let that = this
                vCode({
                    code: this.verificationCode,
                    phone: this.phone,
                    type: 2
                }).then(() => {
                    that.showModal = true
                })
            },
            // 确认更换手机号
            changePhone(){
                this.putPhone();
            },
            cancelHandle(){
                this.showModal = false
            },
            putPhone(){
                let that = this;
                uni.showLoading({
                    title: ''
                });
                service.loginService.putPhone({
                    data: {
                        phone: this.phone
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            uni.showToast({
                                title: `修改成功`,
                                duration: 2500,
                                icon: 'none'
                            })
                            that.showModal = false;
                            uni.navigateTo({
                                url: '/pages/mine/index'
                            });
                            getUserInfo();
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .bind-new-phone{
        padding-top: 40rpx;
    }
    .title{
        font-weight:bold;
        font-size:32rpx;
        margin-bottom: 38rpx;
    }
    .input-wrapper{
        width: 690rpx;
        height: 88rpx;
        position: relative;
        margin-bottom: 34rpx;
        &.border{
            border:1px solid #E5E5E5;
        }
        .icon-btn{
            font-size: 56rpx;
            color: #2BA8FC;
            position: absolute;
            left: 22rpx;
            top: 50%;
            transform: translateY(-50%);
            margin-top: 4rpx;
        }
        .uni-input{
            line-height: 88rpx;
            height: 88rpx;
            box-sizing: border-box;
            width: 100%;
            padding-left: 113rpx;
        }
    }
    .change-phone-confirm{
        background: #FFFFFF;
        padding: 30rpx 38rpx;
        box-sizing: border-box;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .btn-wrappers{
            width: 488rpx;
        }
        .img{
            width: 166rpx;
            height: 166rpx;
            border-radius: 50%;
        }
        .tips{
            font-size:36rpx;
            margin-top: 54rpx;
            margin-bottom: 70rpx;
        }
        .btns{
            width:237rpx;
            height:80rpx;
            border:1rpx solid rgba(43,168,252,1);
            border-radius:8rpx;
            text-align: center;
            line-height: 80rpx;
            &.white-btn{
                color:#2BA8FC;
            }
            &.blue-btn{
                color: #FFFFFF;
                background: #2BA8FC;
            }
        }
    }
</style>